import React from 'react';
import { Table } from 'antd';
import './table2.scss'; // 引入 CSS 文件

const data = [
  { key: '1', 组件: '项', 页面数量: 10, 使用数量: '211' },
  { key: '2', 组件: '表单', 页面数量: 30, 使用数量: '211' },
  { key: '3', 组件: '按钮', 页面数量: 20, 使用数量: '211' },
  { key: '4', 组件: '报表', 页面数量: 70, 使用数量: '211' },
  { key: '5', 组件: '处理', 页面数量: 90, 使用数量: '211' },
  { key: '6', 组件: '动态操作', 页面数量: 100, 使用数量: '211' },
];

const columns = [
  {
    title: <span style={{ fontWeight: 'normal', fontSize: 20 }}>组件</span>,
    dataIndex: '组件',
    filters: data.map(item => ({ text: item.组件, value: item.组件 })),
    filterMode: 'tree',
    filterSearch: true,
    onFilter: (value, record) => record.组件.startsWith(value),
    width: '30%',
    onCell: () => ({ style: { fontWeight: 'bold', fontSize: 20 } }),
  },
  {
    title: <span style={{ fontWeight: 'normal', fontSize: 20 }}>页面数量</span>,
    dataIndex: '页面数量',
    sorter: (a, b) => a.页面数量 - b.页面数量,
    onCell: () => ({ style: { fontWeight: 'bold', fontSize: 20 } }),
  },
  {
    title: <span style={{ fontWeight: 'normal', fontSize: 20 }}>使用数量</span>,
    dataIndex: '使用数量',
    sorter: (a, b) => a.使用数量 - b.使用数量,
    onFilter: (value, record) => record.使用数量.startsWith(value),
    filterSearch: true,
    width: '40%',
    onCell: () => ({ style: { fontWeight: 'bold', fontSize: 20 } }),
  },
];

const TableEx = () => (
  <div>
    <h2 style={{ 
      fontSize: "22px",
      fontWeight: "bold",
      margin: 0,
      fontWeight: 'bold'
    }}>
      组件使用统计
    </h2>
    <div className="table-wrapper" style={{marginTop:'15px'}}>
      <Table
        columns={columns}
        className="gradient-table" 
        dataSource={data}
        pagination={false}
      />
    </div>
    </div>
);

export default TableEx;
